<template>
  <view class="article-container">
    <view class="article-header">
      <view class="title">
        {{ detail.xiqukepuName }}
      </view>
      <view
        class="meta-info"
        :class="{
          'justify-center': !detail.xiqukepuValue || !detail.insertTime,
        }"
      >
        <text v-if="detail.xiqukepuValue" class="subtitle">
          {{ detail.xiqukepuValue }}
        </text>
        <text class="publish-date">
          {{ detail.insertTime }}
        </text>
      </view>
      <view class="divider-line"></view>
    </view>

    <view class="image-container">
      <image
        class="article-image"
        :src="baseUrl + detail.xiqukepuPhoto"
        mode="widthFix"
      ></image>
    </view>

    <view class="content-wrapper">
      <rich-text
        class="article-content"
        :nodes="detail.xiqukepuContent"
      ></rich-text>
    </view>
  </view>
</template>


<script>
export default {
  data() {
    return {
      user: {}, //当前登录表的所有参数
      sessionTable: uni.getStorageSync("nowTable"), //登录账户所在表名
      role: uni.getStorageSync("role"), //权限
      userId: uni.getStorageSync("userid"), //当前登录人的id
      /*其他     开始*/
      autoplaySwiper: false ? true : false,
      intervalSwiper: false
        ? $template2.front.base.swiper.autoplay.delay
        : 5000,
      btnColor: [
        "#67c23a",
        "#909399",
        "#e6a23c",
        "#f56c6c",
        "#356c6c",
        "#3498db",
        "#f093a9",
        "#a7c23a",
        "#104eff",
        "#90f794",
        "#a21233",
        "#8e44ad",
      ],
      mescroll: null, //mescroll实例对象
      downOption: {
        auto: false, //是否在初始化后,自动执行下拉回调callback; 默认true
      },
      upOption: {
        noMoreSize: 3, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
        textNoMore: "~ 没有更多了 ~",
      },
      hasNext: true,
      /*其他     结束*/
      xiqukepuId: "",
      detail: {}, //本页面数据对象
      swiperList: [], //主图
      collectionFlag: 0, //收藏
      /*留言评论评分相关     开始*/
      totalScore: 0, //总评分
      scoreData: 0, //评分
      commentData: null, //留言
      commentList: [], //留言数据集合
      /*留言评论评分相关     结束*/
      erweimaText: "",
    };
  },
  computed: {
    baseUrl() {
      return this.$base.url;
    },
  },
  async onLoad(options) {
    this.xiqukepuId = options.id;
  },
  async onShow(options) {
    // 渲染数据
    this.init();
    let table = uni.getStorageSync("nowTable");
    // 获取用户信息
    let res = await this.$api.session(table);
    this.user = res.data;
    this.btnColor = this.btnColor.sort(() => {
      return 0.5 - Math.random();
    });
    let cleanType = uni.getStorageSync("pingluenStateState");
    if (cleanType) {
      uni.removeStorageSync("pingluenStateState");
      this.mescroll.num = 1;
      this.upCallback(this.mescroll);
    }
  },
  destroyed: function () {
    //window.clearInterval(this.inter);
  },
  methods: {
    //返回
    async fanhui() {
      this.$utils.tab("list");
    },
    //下载
    download(url) {
      let _this = this;
      uni.downloadFile({
        url: url,
        success: (res) => {
          if (res.statusCode === 200) {
            _this.$utils.msg("下载成功");
            window.open(url);
          }
        },
      });
    },
    // 获取详情
    async init() {
      let res = await this.$api.info("xiqukepu", this.xiqukepuId);
      this.detail = res.data;
      this.detail.xiqukepuContent = this.detail.xiqukepuContent
        .replace("<img", '<img  class="daxiao"')
        .replace('src="upload/', 'src="' + this.$base.url + "upload/");
      // 主图
      this.swiperList = this.detail.xiqukepuPhoto
        ? this.detail.xiqukepuPhoto.split(",")
        : [];
    },
    /* && !nameList?seq_contains('zuowei_number')*/
    // mescroll组件初始化的回调,可获取到mescroll对象
    mescrollInit(mescroll) {
      this.mescroll = mescroll;
    },

    /*下拉刷新的回调 */
    downCallback(mescroll) {
      this.hasNext = true;
      mescroll.resetUpScroll();
    },

    /*上拉加载的回调: mescroll携带page的参数, 其中num:当前页 从1开始, size:每页数据条数,默认10 */
    async upCallback(mescroll) {
      this.mescroll.endByPage(this.mescroll.num, 10);
    },
    async baoming() {
      let _this = this;
      uni.showModal({
        title: "提示",
        content: "确定要报名么",
        success: async function (res) {
          if (res.confirm) {
            await _this.$api.add("xiqukepuYuyue", {
              yonghuId: _this.user.id,
              xiqukepuId: _this.detail.id,
            });
            _this.$utils.msg("报名成功");
            _this.$utils.jump("/pages/xiqukepuYuyue/list");
          }
        },
      });
    },
    async onErweima() {
      //打开模态框
      // this.erweimaText = "画师名称:["+this.detail.huashiName+"]所属画院:["+this.detail.huayuanName+"]画师称号:["+this.detail.huashiChenghao+"]画师性别:["+this.detail.sexValue+"]"
      this.erweimaText = "二维码内容";
      this.$refs.erweimaModal.open();
    },
    async closeErweima() {
      //关闭模态框
      this.$refs.erweimaModal.close();
    },
    async saveErweima() {
      //保存二维码
      uni.showLoading({ title: "保存中", mask: true });
      const ref = this.$refs["qr"];
      ref.save({
        success: (res) => {
          uni.hideLoading();
          uni.showToast({ icon: "success", title: "保存成功" });
        },
        fail: (err) => {
          uni.showToast({ icon: "none", title: JSON.stringify(err) });
        },
      });
    },
  },
};
</script>

<style>
.article-container {
  margin: 20rpx 30rpx 40rpx;
  background: #ffffff;
  border-radius: 12rpx;
  box-shadow: 0 8rpx 30rpx rgba(0, 0, 0, 0.08);
  overflow: hidden;
  transition: all 0.3s ease;
}

.article-header {
  padding: 32rpx 32rpx 24rpx;
}

.title {
  font-size: 36rpx;
  font-weight: 600;
  color: #333;
  line-height: 1.4;
  margin-bottom: 20rpx;
  position: relative;
  padding-left: 16rpx;
}

.title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8rpx;
  bottom: 8rpx;
  width: 4rpx;
  background: #e53f3a;
  border-radius: 2rpx;
}

.meta-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 24rpx;
  color: #666;
  margin-bottom: 28rpx;
}

.meta-info.justify-center {
  justify-content: center;
}

.subtitle {
  max-width: 60%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.publish-date {
  color: #999;
}

.divider-line {
  height: 1rpx;
  background: linear-gradient(
    90deg,
    transparent 0%,
    #e0e0e0 50%,
    transparent 100%
  );
  margin: 0 -32rpx;
}

.image-container {
  padding: 0 32rpx;
  margin: 24rpx 0;
}

.article-image {
  width: 100%;
  border-radius: 8rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
}

.content-wrapper {
  padding: 0 32rpx 32rpx;
}

.article-content {
  font-size: 30rpx;
  color: #444;
  line-height: 1.8;
  text-align: justify;
}

.article-content >>> p {
  margin: 1em 0;
}

.article-content >>> img {
  max-width: 100% !important;
  height: auto !important;
  border-radius: 8rpx;
  margin: 20rpx 0;
}
</style>